<template>
  <view>
    <navbar top="80rpx"></navbar>
    <view class="container">
      <view class="cont-box">
        <view class="dis-flex search-input-box">
          <view class="search-input">
            <view class="dis-flex search-box">
              <view class="left">
                <icon color="rgba(180,180,180,1)" size="15" type="search"></icon>
              </view>
              <view class="right">
                <input @input="getSearchContent" class="input" :focus="true" placeholder="请输入您搜索的藏品" placeholderStyle="color:#aba9a9" type="text" />
              </view>
            </view>
          </view>
          <view class="serch-button">
            <button @tap="search" type="warn">搜索</button>
          </view>
        </view>
        <view class="search-cont-box" v-if="recentSearch.length">
          <view class="title-box">
            最近搜索
            <text @tap="clearSearch" class="iconfont icon-lajixiang col-7"></text>
          </view>
          <view class="sale-button-box">
            <view class="seconds-kill-li" v-for="(recent, idx) in recentSearch" :key="recent.hotrecent">
              <view @tap="goSearch" class="recent-button" :data-text="recent">{{ recent }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp();
import navbar from "@/components/navbar/navbar";
export default {
  components: {
    navbar
  },
    data() {
        return {
            recentSearch: [],
            searchValue: '',

            recent: {
                hotrecent: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取历史搜索
        this.getRecentSearch();
    },
    methods: {
        /**
         * 获取历史搜索
         */
        getRecentSearch: function () {
            let recentSearch = uni.getStorageSync('recentSearch');
            this.setData({
                recentSearch
            });
        },

        /**
         * 绑定输入值
         */
        getSearchContent: function (e) {
            this.searchValue = e.detail.value;
        },

        /**
         * 搜索提交
         */
        search: function () {
            if (this.searchValue) {
                // 记录最近搜索
                let recentSearch = uni.getStorageSync('recentSearch') || [];
                let index = recentSearch.indexOf(this.searchValue);

                if (index > -1) {
                    recentSearch.splice(index, 1);
                }

                recentSearch.unshift(this.searchValue);
                uni.setStorageSync('recentSearch', recentSearch); // 跳转到商品列表页

                uni.navigateTo({
                    url: './goods?search=' + this.searchValue
                });
            }
        },

        /**
         * 清空最近搜索记录
         */
        clearSearch: function () {
            uni.removeStorageSync('recentSearch');
            this.getRecentSearch();
        },

        /**
         * 跳转到最近搜索
         */
        goSearch: function (e) {
            uni.navigateTo({
                url: './goods?search=' + e.target.dataset.text
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.seconds-kill-li {
    padding: 10rpx;
    box-sizing: border-box;
    width: 33.3%;
    float: left;
}

.title-box {
    font-size: 10pt;
    padding: 50rpx 0 0 0;
    color: #777;
}

.title-box .icon-lajixiang {
    float: right;
}

.sale-button-box {
    padding: 10px 0;
    overflow: hidden;
}

.sale-button,
.recent-button {
    background: #fff;
    padding: 10rpx;
    border-radius: 50px;
    justify-content: center;
    text-align: center;
    font-size: 26rpx;
    border: 1px solid #eee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30rpx;
    line-height: 30rpx;
}

.serch-button button {
    background: $uni-bg-color-main-linear;
}

/* asd */

.search-input-box {
    height: 64rpx;
}

.search-input {
    width: 80%;
    background: #fff;
    border-radius: 5px 0 0 5px;
    padding-left: 10rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.search-input input {
    font-size: 30rpx;
    height: 64rpx;
    line-height: 64rpx;
}

.serch-button {
    width: 20%;
    box-sizing: border-box;
}

.serch-button button {
    line-height: 64rpx;
    height: 64rpx;
    font-size: 28rpx;
    border-radius: 0 5px 5px 0;
}

.seconds-kill-li {
    padding: 10rpx;
    box-sizing: border-box;
}

.title-box {
    font-size: 10pt;
    padding: 50rpx 0 0 0;
    color: #777;
}

.sale-button,
.recent-button {
    background: #fff;
    padding: 10rpx;
    border-radius: 50px;
    justify-content: center;
    text-align: center;
    font-size: 26rpx;
    border: 1px solid #ccc;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30rpx;
    line-height: 30rpx;
}

.search-cont {
    padding: 0 15px;
    background: #fff;
}

.search-box .left {
    width: 28px;
}

.search-box .right {
    flex: 1;
}

.sale-button-box .seconds-kill-li {
    width: 33.3%;
    float: left;
}

.title-box image {
    width: 35rpx;
    height: 35rpx;
    float: right;
}
</style>
